<template>
	<view>
		<!-- 搜索框组件 -->
		<view class="search-box">
			<my-search @onSearch="gotoSearch"></my-search>
		</view>
		<view class="scroll-view-container">
			<!-- 左侧的滚动视图区域 -->
			<scroll-view class="left-scroll-view" scroll-y="true" :style="{ height: wh + 'px' }">
				<block v-for="(item, index) in cateList" :key="item.cat_id">
					<view :class="['left-scroll-view-item', index === current ? 'active' : '']" @click="onCurrent(index)">
						{{ item.cat_name }}
					</view>
				</block>
			</scroll-view>
			<!-- 右侧的滚动视图区域 -->
			<scroll-view class="right-scroll-view" scroll-y="true" :style="{ height: wh + 'px' }" :scroll-top="scrollTop">
				<view class="cate-lv2" v-for="item in twoCateLevel" :key="item.cat_id">
					<view class="cate-lv2-title">/ {{ item.cat_name }} /</view>
					<!-- 渲染三级分类列表数据 -->
					<view class="cate-lv2-title-list">
						<view
							v-for="item1 in item.children"
							:key="item1.cat_id"
							class="cate-lv3-item"
							@click="gotoGoodsList(item1)"
						>
							<image :src="`${baseUrlImg}${item1.cat_icon.substring(31)}`"/>
							<!-- 文本区域 -->
							<text>{{ item1.cat_name }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { getCateList } from '@/api/index';
import MySearch from '@/components/MySearch/index.vue';
// 导入自己封装的 mixin 模块
import badgeMix from '@/mixins/tabbar-badge.js'
export default {
	components: {
		MySearch,
	},
	name: 'WxShopsIndex',
	data() {
		return {
			// 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
			wh: 0,
			scrollTop: 0,
			// 当前选中项的索引，默认让第一项被选中
			current: 0,
			// 分类数据列表
			cateList: [],
			// 二级分类列表
			twoCateLevel: [],
		};
	},
	// 将 badgeMix 混入到当前的页面中进行使用
	mixins: [badgeMix],
	onLoad() {
		// 获取当前系统的信息
		const sysInfo = uni.getSystemInfoSync();
		// 为 wh 窗口可用高度动态赋值
		this.wh = sysInfo.windowHeight;
		// 调用获取分类列表数据的方法
		this.getCateList();
	},

	methods: {
		// 分类数据列表数据的方法
		async getCateList() {
			const { data: res } = await getCateList();
			if (res.meta.status !== 200) {
				return uni.$showMsg;
			}
			this.cateList = res ? res.message : [];
			this.twoCateLevel = res ? res.message[0].children : [];
		},
		onCurrent(index) {
			this.current = index;
			this.scrollTop = this.scrollTop === 0 ? 1 : 0;
			this.twoCateLevel = this.cateList[index].children;
		},
		// 点击三级分类项跳转到商品列表页面
		gotoGoodsList(item) {
			uni.navigateTo({
				url: `/pages/goods_list/index?cid=${item.cat_id}`,
			});
		},
		// 点击跳转到搜索页
		gotoSearch() {
			uni.navigateTo({
				url: '/pages/search/index',
			});
		},
	},
};
</script>

<style lang="less" scoped>
.search-box {
	position: sticky;
	top: 0;
	z-index: 9999;
}
.scroll-view-container {
	display: flex;
	// 左侧区域样式
	.left-scroll-view {
		height: 100%;
		width: 120px;
		.left-scroll-view-item {
			line-height: 60px;
			text-align: center;
			background-color: #f7f7f7;
			font-size: 12px;
		}
		// 激活项的样式
		.active {
			background-color: #ffffff;
			position: relative;

			// 渲染激活项左侧的红色指示边线
			&::before {
				content: ' ';
				display: block;
				width: 3px;
				height: 60px;
				background-color: #c00000;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
	// 右侧区域样式
	.right-scroll-view {
		height: 100%;
		.cate-lv2-title {
			font-size: 12px;
			font-weight: bold;
			text-align: center;
			padding: 15px 0;
		}
		.cate-lv2-title-list {
			display: flex;
			flex-wrap: wrap;

			.cate-lv3-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 33.33%;
				margin-bottom: 10px;
				image {
					width: 60px;
					height: 60px;
				}
				text {
					font-size: 12px;
				}
			}
		}
	}
}
</style>
